<template>
	<view class="content mainpadding" style="padding-bottom: 150rpx;">
		<view class="mainpadding ffffff border2">
			<view class="flexbetween padding_bottom border_bottom">
				<view class="color_ling text_x">客戶昵稱</view>
				<view class="text_a color_theme">{{username}}</view>
			</view>
			<view class="flexbetween margin_top">
				<view class="color_ling text_x">客戶電話</view>
				<view class="text_a color_six">{{phone}}</view>
			</view>
		</view>
		<view class="margin_top mainpadding ffffff border2">
			<view class="flexbetween padding_bottom border_bottom">
				<view class="color_ling text_x">客戶人數</view>
				<view class="numberBg">
					<u-number-box button-size="36" :min="0" color="#000000" bgColor="#F7F7F7" iconStyle="color: #fff"
						v-model="crnum"></u-number-box>
				</view>
			</view>
			<view class="margin_top flexbetween padding_bottom border_bottom">
				<view class="color_ling text_x">老人人數</view>
				<view class="numberBg">
					<u-number-box button-size="36" :min="0" color="#000000" bgColor="#F7F7F7" iconStyle="color: #fff"
						v-model="oldnum"></u-number-box>
				</view>
			</view>
			<view class="flexbetween margin_top">
				<view class="color_ling text_x">兒童人數</view>
				<view class="numberBg">
					<u-number-box button-size="36" :min="0" color="#000000" bgColor="#F7F7F7" iconStyle="color: #fff"
						v-model="ernum"></u-number-box>
				</view>
			</view>
		</view>
		<view class="margin_top mainpadding ffffff border2" v-if="orderInfo.hy_type!=3 && orderInfo.hy_type!=7 && issm!=1">
			<view class="flexbetween" @click="show=true">
				<view class="color_ling text_x">預約時間</view>
				<view class="flexleft">
					<input type="text" class="text_a color_six margin_right1 textright" disabled placeholder="請選擇"
						v-model="yuefenzu">
					<u-icon name="arrow-right" color="#999" size="16"></u-icon>
				</view>
			</view>
			<view class="hong_text margin_top main_size textcenter" v-if="yytimeList.length==0">今日預約時間已超過，請選擇其他日期</view>
			<view class="flexleft flex-wrap" v-if="yytimeList.length">
				<view class="margin_right2 margin_top2" v-for="(item,index) in yytimeList">
					<view :class="checktime==item?'cateSelect':'cateNoSelect'" @click="checktime=item">
						{{item}}
					</view>
				</view>
			</view>
		</view>
		<view class="margin_top mainpadding ffffff border2" v-if="orderInfo.hy_type!=3 && orderInfo.hy_type!=7 && issm==1">
			<view class="flexbetween">
				<view class="color_ling text_x">預約時間</view>
				<view class="text_a color_six margin_right1 textright">{{yuefenzu}} {{checktime}}</view>
			</view>
		</view>
		<view class="mainpadding ffffff border2" v-if="orderInfo.hy_type==3 ">
			<view class="flexbetween" @click="yykshow=true">
				<view class="flexleft">
					<view class="color_ling text_x" style="min-width: 150rpx;">選擇優惠卡</view>
					<view class="" @click.stop="yhlxtext='';yhlxid=''">
						<u-icon name="trash" color="#ff0000" size="16" v-if="yhlxid"></u-icon>
					</view>
				</view>
				<view class="flexright" style="width: 100%;">
					<input type="text" style="width: 100%;" class="text_a color_six margin_right1 textright" disabled
						placeholder="請選擇" v-model="yhlxtext">
					<u-icon name="arrow-right" color="#999" size="16"></u-icon>
				</view>
			</view>
		</view>
		<template v-if="yhlxid">
			<view class="mainpadding ffffff flexbetween" v-if="orderInfo.hy_type==3 ">
				<view class="color_ling text_x" style="min-width: 120rpx;">優惠卡</view>
				<view class="flexright" style="border: 1rpx solid #feb800;padding: 5rpx;border-radius: 5rpx;" @click="scangetCode">
					<!-- // <input type="text" placeholder="請輸入" v-model="cardno" class="margin_right2" style="text-align: right;" @blur="searchcard"/> -->
					<input type="text" placeholder="" v-model="cardno" class="margin_right2" style="text-align: right;" disabled=""/>
					<u-icon name="scan" color="#feb800" size="28"></u-icon>
				</view>
			</view>
		</template>
		<view class="mainpadding ffffff flexbetween" v-if="orderInfo.hy_type==3 ">
			<view class="color_ling text_x" style="min-width: 120rpx;">住宿方式</view>
			<view class="flexright">
				<u-radio-group v-model="zs_type" placement="row" circle>
					<u-radio activeColor="#feb800" :customStyle="{marginRight: '10rpx'}" v-for="item in checkboxList1" :key="item.value" :label="item.name" :name="item.value"></u-radio>
				</u-radio-group>
			</view>
		</view>
		<view class="mainpadding ffffff flexbetween" v-if="orderInfo.hy_type==3 && ycShow">
			<view class="color_ling text_x" style="min-width: 120rpx;">是否包含夜衝</view>
			<u-switch inactiveColor="rgb(230, 230, 230)" v-model="ycstatus" activeColor="#ffb800"></u-switch>
		</view>
		<view class="margin_top mainpadding ffffff border2" @click="jumpdetail('/pages_index/quanbufx?id=',shop_id)" v-if="orderInfo.hy_type==3 ">
			<view class="flexbetween">
				<view class="color_ling text_x" style="min-width: 120rpx;">查看全部房型</view>
				<u-icon name="arrow-right" color="#999" size="16"></u-icon>
			</view>
		</view>
		<view class="margin_top mainpadding ffffff border2" v-if="orderInfo.hy_type==3 ">
			<view class="flexbetween" @click="checkzstime">
				<view class="color_ling text_x" style="min-width: 120rpx;">入住時間</view>
				<view class="flexright" style="width: 100%;">
					<input type="text" style="width: 100%;" class="text_a color_six margin_right1 textright" disabled
						placeholder="請選擇" v-model="rzcontent">
					<u-icon name="arrow-right" color="#999" size="16"></u-icon>
				</view>
			</view>
		</view>
		
		<timePicker :messageTime="messageTime" @timeConfirm="timeConfirm"></timePicker>
		<view class="mainpadding_top ffffff line_b9" v-if="orderInfo.appkey&&orderInfo.is_sdkfp==0">
			<view class="text_weight color_san white_nowrap">發票類型
				<!-- <text style="color: #ff0000;">*</text> -->
			</view>
			<view class="margin_top flexbetween">
				<view :class="opentype==0?'flexleft select':'flexleft noSelect'" @click="opentype=0">
					<image class="vote1Img"
						:src="opentype==0?'@/static/images/mine/vote1_active.png':'@/static/images/mine/vote1.png'"
						mode=""></image>
					<view>紙本</view>
				</view>
				<view :class="opentype==1?'flexleft select':'flexleft noSelect'" @click="opentype=1;tbcode=zjcode;">
					<image class="vote2Img"
						:src="opentype==1?'@/static/images/mine/vote2_active.png':'@/static/images/mine/vote2.png'"
						mode=""></image>
					<view>載具</view>
				</view>
				<view :class="opentype==2?'flexleft select':'flexleft noSelect'" @click="opentype=2;tbcode=tbcode1;">
					<image class="vote3Img"
						:src="opentype==2?'@/static/images/mine/vote3_active.png':'@/static/images/mine/vote3.png'"
						mode=""></image>
					<view>統編</view>
				</view>
				<view :class="opentype==3?'flexleft select':'flexleft noSelect'" @click="opentype=3;tbcode=jzcode;">
					<image class="vote4Img"
						:src="opentype==3?'@/static/images/mine/vote4_active.png':'@/static/images/mine/vote4.png'"
						mode=""></image>
					<view>捐贈</view>
				</view>
			</view>
			<view class="invoiceInput margin_top flexbetween" v-show="opentype!=0">
				<input class="text_b" type="text" placeholder="請輸入手機載具" v-show="opentype==1" v-model="tbcode">
				<input class="text_b" type="text" placeholder="請輸入統一編碼" @blur="getTt()" v-show="opentype==2"
					v-model="tbcode">
				<input class="text_b" type="text" placeholder="請輸入捐贈碼" v-show="opentype==3" v-model="tbcode">
				<view class="" v-show="opentype==1 || opentype==3" @click="getCode()">
					<u-icon name="scan" color="#ffb800" size="28"></u-icon>
				</view>
			</view>
			<view class="invoiceInput margin_top" v-show="opentype==2">
				<input class="text_b" type="text" placeholder="請輸入發票抬頭" v-model="tbmc">
			</view>
		</view>
		<view class="footer">
			<view class="footerButton" @click="submit">確定</view>
		</view>
		<u-datetime-picker cancelText="取消" confirmText="確認" :show="show" title="選擇時間" v-model="value1" mode="date"
			:minDate="Number(new Date())" confirmColor="#FFB800" @confirm="confirm" @cancel="show=false"></u-datetime-picker>
		<u-calendar confirmText="確認" title="選擇日期" startText="開始" :monthNum ="30" endText="結束" :show="calendarshow" mode="range"
			@close="calendarshow=false" color="#fbb826" @confirm="calendarconfirm"></u-calendar>
		<u-picker :show="yykshow" :columns="hotellist" keyName="name" confirmText="確認" @confirm="yhconfirm" @cancel="yykshow=false"></u-picker>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				show: false,
				value1: Number(new Date()),
				shop_id: "", //店鋪id
				username: "", //客戶姓名
				phone: "", //客戶電話
				crnum: 0, //客戶人數
				oldnum: 0, //老人人數
				ernum: 0, //兒童人數
				yuefenzu: "",//年月日
				opentype: 0, //開票類型 0紙本 1載具 2統編 3捐贈
				tbcode: "", //開票内容
				tbcode1: "",
				jzcode: "",
				zjcode: "",
				tbmc: "",
				orderInfo: {},
				issm: 0,
				checktime: "",//時分
				calendarshow: false, //日曆選擇器
				rznum: 0,
				start_date: "",
				end_date: "",
				rzcontent: "",
				zs_type: "",
				messageTime: {
					timeShow: false,
					title: "選擇日期",
					mode: "datetime", //date日期，datetime年月日时分秒，time时间，year-month年月
					minDate: Number(new Date()) //最小时间
				},
				ycstatus:false,
				cardno:"",
				hotellist:[],
				yhlxtext:"",
				yhlxid:"",
				yykshow:false,
				checkboxList1:[],
				ycheckboxList1:[],
				checkboxList2:[{
				    name: '休息',
				    value: "2"
				},
				{
				    name: '住宿',
				    value: "1"
				},{
				    name: '車泊',
				    value: "4"
				},
				{
				    name: '搭帳',
				    value: "5"
				}],
				checkboxValue1:[],
				ycShow:false,
				
			}
		},
		onUnload() {
			uni.$off("returnCode")
			uni.$off("sendewmcode")
		},
		onLoad(options) {
			this.shop_id = options.id
			this.issm = options.issm
			if(this.issm){
				this.yuefenzu = this.http.returnDate(Number(new Date()))
				// 創建一個 Date 物件
				let now = new Date();
				// 獲取當前的小時和分鐘
				let hours = now.getHours(); // 獲取小時 (0-23)
				let minutes = now.getMinutes(); // 獲取分鐘 (0-59)
				// 格式化為兩位數（例如 1:5 -> 01:05）
				let formattedHours = String(hours).padStart(2, '0');
				let formattedMinutes = String(minutes).padStart(2, '0');
				this.checktime = `${formattedHours}:${formattedMinutes}`
			}
			uni.$on("returnCode", data => {
				this.tbcode = data
			})
			uni.$on("sendewmcode", data => {
				this.cardno = data
			})
			this.getuserInfo()
			this.getshopInfo()
			this.hotelcardTypeIndex()
			
		},
		onShow() {
			uni.setStorageSync("ydjdList",[])
		},
		watch: {
			zs_type(newval){
				this.start_date = ""
				this.end_date = ""
				this.rzcontent = ""
			},
		},
		computed:{
			yytimeList(){
				if(this.issm!=1){
					this.checktime = ""
					let arr = this.orderInfo.yytime.split(',')
					let arr1 = []
					arr.forEach(item=>{
						if(this.yuefenzu!=''){
							let text = this.yuefenzu + " " + item
							if(Number(new Date(text)) > Number(new Date())){
								arr1.push(item)
							}
						}
					})
					return arr1
				}else{
					return this.orderInfo.yytime.split(',')
				}
			}
		},
		methods: {
			scangetCode(){
				uni.navigateTo({
					url:"/pages_index/getewmcode"
				})
			},
			yhconfirm(e){
				let arr2 = []
				let ycShow = false
				e.value[0].zs_type.split(',').forEach(item=>{
					if(item==3){
						ycShow=true
					}
					this.ycheckboxList1.forEach(curr=>{
						if(item==curr.value){
							arr2.push(curr)
						}
					})
				})
				this.checkboxList1 = arr2
				this.ycShow = ycShow
				this.yhlxtext = e.value[0].name
				this.yhlxid = e.value[0].id
				this.yykshow = false
			},
			searchcard(){
				if(this.cardno==""){
					return false
				}
				this.http.request("/api/Hotel/getHotelcard", "GET", {
					shop_id: uni.getStorageSync("shop_id"),
					cardno: this.cardno
				}).then(res => {
					
				})
			},
			checkzstime() {
				if(this.zs_type==""){
					httpRequest.toast("請選擇住宿方式")
					return false
				}
				if (this.zs_type == 2) {
					this.messageTime.timeShow = true
				}
				if (this.zs_type != 2) {
					this.calendarshow = true
				}
			},
			
			timeConfirm(e) {
				this.start_date = e
				this.end_date = e
				this.rzcontent = e
			},
			calendarconfirm(e) {
				console.log(e);
				this.start_date = e[0]
				this.end_date = e[e.length - 1]
				this.rznum = e.length - 1
				this.rzcontent = this.start_date + "至" + this.end_date + " 共" + this.rznum + "晚"
				this.calendarshow = false
			},
			getTt() {
				if (this.opentype != 2) {
					return false
				}
				this.http.request("/api/user/getTbmc", "GET", {
					tbcode: this.tbcode
				}).then(res => {
					if (res.code == 1) {
						this.tbmc = res.data.tbinfo.name
					}
				})
			},
			
			getshopInfo() {
				this.http.request('/api/shop/shop', 'POST', {
					shop_id: uni.getStorageSync("shop_id")
				}).then(res => {
					let arr = res.data.yytime.split(',')
					arr.sort((a, b) => {
					    const [aHours, aMinutes] = a.split(':').map(Number);
					    const [bHours, bMinutes] = b.split(':').map(Number);
					    // 比較小時
					    if (aHours !== bHours) {
					        return aHours - bHours;
					    }
					    // 比較分鐘
					    return aMinutes - bMinutes;
					});
					res.data.yytime = arr.join()
					let arr2 = []
					let ycShow = false
					res.data.zs_type.split(',').forEach(item=>{
						if(item==3){
							ycShow=true
						}
						this.checkboxList2.forEach(curr=>{
							if(item==curr.value){
								arr2.push(curr)
							}
						})
					})
					this.checkboxList1 = arr2
					this.ycheckboxList1 = arr2
					this.ycShow = ycShow
					this.orderInfo = res.data
				})
			},
			hotelcardTypeIndex() {
				this.http.request('/api/hotel/hotelcardTypeIndex', 'POST', {
					shop_id: uni.getStorageSync("shop_id")
				}).then(res => {
					this.hotellist.push(res.data)
				})
			},
			getuserInfo() {
				this.http.request('/api/member/userInfo', 'GET', {}).then(res => {
					if (res.data.opentype != 0) {
						this.opentype = res.data.opentype
					}
					if(res.data.opentype == 1){
						this.tbcode = res.data.zjcode
					}
					if(res.data.opentype == 2){
						this.tbcode = res.data.tbcode
					}
					if(res.data.opentype == 3){
						this.tbcode = res.data.jzcode
					}
					uni.setStorageSync("invite_code",res.data.invite_code)
					this.jzcode = res.data.jzcode
					this.zjcode = res.data.zjcode
					this.tbcode1 = res.data.tbcode
					this.tbmc = res.data.tbmc
					this.username = res.data.nickname
					this.phone = res.data.mobile
				})

			},
			confirm(e) { //確認預約時間
				console.log(e)
				this.yuefenzu = this.http.returnDate(e.value)
				this.show = false
			},
			async submit() {
				if (this.orderInfo.hy_type == 3 || this.orderInfo.hy_type==7) {
					let allnum = Number(this.crnum) + Number(this.oldnum) + Number(this.ernum)
					if (allnum == 0) {
						this.http.toast("到店人數不能爲0")
						return false
					}
					if(this.cardno=="" && this.yhlxid!=""){
						this.http.toast("請掃描優惠卡");
						return false
					}
					if (this.start_date == "") {
						this.http.toast("請選擇入住时间");
						return false
					}
					if(this.rznum<2 && this.ycstatus){
						this.http.toast("包含夜衝至少選兩天");
						return false
					}
					
					let data = {
						rznum: this.rznum,
						start_date: this.start_date,
						end_date: this.end_date,
						zs_type: this.zs_type,
						is_yc:this.ycstatus?1:0,
						allnum,
						adult_num:this.crnum,
						old_num:this.oldnum,
						child_num:this.ernum,
						yhlxid:this.yhlxid
					}
					uni.navigateTo({
						url: '/pages_index/jiudian?msg=' + encodeURIComponent(JSON.stringify(data))
					})
					return false
				}
				if (!this.yuefenzu) {
					this.http.toast("請選擇預約時間");
					return false
				}
				if (!this.checktime) {
					this.http.toast("請選擇預約時間段");
					return false
				}
				let allnum = Number(this.crnum) + Number(this.oldnum) + Number(this.ernum)
				if (allnum == 0) {
					this.http.toast("到店人數不能爲0")
					return false
				}
				let res = await this.http.request('/api/Ordermake/addOrdermake', 'POST', {
					shop_id: this.shop_id, //店鋪id
					username: this.username, //客戶姓名
					phone: this.phone, //客戶電話
					crnum: this.crnum, //客戶人數
					oldnum: this.oldnum, //老人人數
					ernum: this.ernum, //兒童人數
					yuetime: this.checktime, //預約時間
					yuefenzu: this.yuefenzu, //預約分组
					opentype: this.orderInfo.appkey ? this.opentype : -1,
					tbcode: this.orderInfo.appkey ? this.tbcode : '',
					tbmc: this.orderInfo.appkey ? this.tbmc : '',
				})
				if (res.code == -1) {
					this.http.toast(res.msg)
					setTimeout(() => {
						uni.navigateTo({
							url: "/pages_mine/personInformation"
						})
					}, 1000)
					return false
				}
				if (res.code == 1) {
					this.http.toast("預約成功");
					if (this.issm == 1) {
						this.setdd()
					}
					setTimeout(() => {
						uni.navigateBack(1)
					}, 500)
				} else if (res.code == 0) {
					this.http.toast(res.msg);
				} else {
					this.http.toast('系統處理中，請稍後再試');
				}
			},
			setdd() {
				if (!httpRequest.checkIsLogin()) {
					return false
				}
				httpRequest.request('/api/Ordermake/authtoOrdermake', 'GET', {
					shop_id: this.shop_id
				}).then(res => {})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.cateSelect {
		padding: 5rpx 20rpx;
		line-height: 53rpx;
		text-align: center;
		background: rgba(255, 92, 0, 0.1);
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		border: 1rpx solid #FF5C00;
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FF5C00;
	}

	.cateNoSelect {
		padding: 5rpx 20rpx;
		line-height: 53rpx;
		line-height: 53rpx;
		text-align: center;
		background: #EFEFEF;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		border: 1rpx solid #EFEFEF;
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
	}

	.numberBg {
		background: #F7F7F7;
		padding: 8rpx 6rpx;
		border-radius: 10rpx 10rpx 10rpx 10rpx;
	}

	::v-deep.u-number-box__minus {
		background-color: #EC7AA0 !important;
	}

	::v-deep.u-number-box__plus {
		background-color: #EC7AA0 !important;
	}

	::v-deep.uicon-minus {
		color: #fff !important;
	}

	::v-deep.uicon-plus {
		color: #fff !important;
	}








	.vote1Img {
		width: 26rpx;
		height: 26rpx;
		margin-left: 20rpx;
		margin-right: 10rpx;
	}

	.vote2Img {
		width: 23.5rpx;
		height: 23.5rpx;
		margin-left: 20rpx;
		margin-right: 10rpx;
	}

	.vote3Img {
		width: 29rpx;
		height: 29rpx;
		margin-left: 20rpx;
		margin-right: 10rpx;
	}

	.vote4Img {
		width: 27rpx;
		height: 27rpx;
		margin-left: 20rpx;
		margin-right: 10rpx;
	}


	.noSelect {
		width: 154rpx;
		height: 69rpx;
		text-align: center;
		line-height: 69rpx;
		background: rgba(102, 102, 102, .1);
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		border: 2rpx solid rgba(102, 102, 102, .1);
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #666666;
	}

	.select {
		width: 154rpx;
		height: 69rpx;
		text-align: center;
		line-height: 69rpx;
		background: rgba(255, 133, 5, 0.1);
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		border: 2rpx solid #FF8505;
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FF8505;
		position: relative;
	}

	.select::after {
		content: '';
		width: 25rpx;
		height: 20rpx;
		position: absolute;
		right: 0;
		bottom: 0;
		background-image: url('/static/images/mine/invoice_select.png');
		background-size: 100% 100%;
	}

	.invoiceInput {
		width: 100%;
		height: 91rpx;
		background: rgba(196, 196, 196, .1);
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		display: flex;
		align-items: center;
		padding-left: 20rpx;

		input {
			width: 80%;
		}
	}
</style>
